<template lang="pug">
div(style="padding-bottom: 5rem")
  app-header(fixed,back,title="快速下单",v-if="!$helper.isWechat")
  .main-wrapper(ref="mainWrapper",:style="{top: $helper.isWechat ? '0' : '0.84rem'}")
    div.wrapper-content
      div.form-box
        mt-field(v-model="formData.fullname",label="联系人",placeholder="请输入",type="text")
        mt-field(v-model="formData.phone",label="联系电话",placeholder="请输入",type="text")
        mt-field(v-model="formData.intro",placeholder="请输入需求描述",type="textarea",rows="4",:style="{'margin-bottom': '.3rem'}")
        app-choose-image(@change="formData.images = $event")
        button.submit-btn(@click="submitHandler") 提交订单
  #customer-service(@click="$router.push('/user/contact')",:style="{bottom:0}")
</template>

<script>
import BScroll from 'better-scroll'
import { Toast, Button, MessageBox, Field } from 'mint-ui'
import Header from 'components/Header'
import ChooseImage from 'components/ChooseImage'
export default {
  components: {
    'mt-button': Button,
    'app-header': Header,
    'mt-field': Field,
    'app-choose-image': ChooseImage
  },
  data () {
    return {
      mainScroll: null,
      formData: {
        fullname: '',
        phone: '',
        intro: '',
        images: []
      }
    }
  },
  async created () {
    this._initScroll()
  },
  methods: {
    _initScroll () {
      if (!this.mainScroll) {
        this.$nextTick(() => {
          this.mainScroll = new BScroll(this.$refs.mainWrapper, {
            probeType: 1,
            click: true,
            scrollbar: {
              fade: true,
              interactive: false
            }
          })
        })
      } else {
        this.mainScroll.refresh()
      }
    },
    async submitHandler () {
      if (!this.formData.fullname) {
        return Toast('联系人不能为空')
      }
      if (!this.formData.phone) {
        return Toast('联系人手机不能为空')
      }
      if (!this.formData.intro && !this.formData.images.length) {
        return Toast('请填写描述或选择拍照图片')
      }
      let action = await MessageBox.confirm('是否提交订单')
      if (action !== 'confirm') {
        return
      }
      const result = await this.$rpc.invoke('quick_add', [
        this.formData.fullname,
        this.formData.phone,
        this.formData.intro,
        this.formData.images
      ]).complete()
      if (result.code) {
        return Toast(result.message)
      } else {
        Toast('提交成功,我们尽快与您联系!')
        this.$router.push({name: 'quick:lists'})
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.main-wrapper
  position: absolute
  bottom: 1.1rem
  left: 0
  right: 0
  overflow: hidden
.wrapper-content
  color: #333
.form-box
  text-align: center
.submit-btn
  padding: 0 .5rem
  height: 1rem
  display: inline-block
  background: #b50909
  color: #fff
  border-radius: .2rem
  float: right
  margin: .1rem 1rem
  margin-left: 0
  cursor: pointer
  font-size: .4rem
  border: none
</style>
